Progressbar

Standard 

<div class="progress">
  <div style="width: 60%" class="progress-bar"></div>
</div>

Standard with Text

40%
<div class="progress">
  <div style="width: 40%" class="progress-bar">40%</div>
</div>

Progressbar Variants

Success
Info
Warning
Danger
Magenta
Gray
<div class="progress">
  <div style="width: 20%" class="progress-bar progress-bar-success">Success</div>
</div>
<div class="progress">
  <div style="width: 40%" class="progress-bar progress-bar-info">Info</div>
</div>
<div class="progress">
  <div style="width: 60%" class="progress-bar progress-bar-warning">Warning</div>
</div>
<div class="progress">
  <div style="width: 80%" class="progress-bar progress-bar-danger">Danger</div>
</div>
<div class="progress">
  <div style="width: 100%" class="progress-bar progress-bar-magenta">Magenta</div>
</div>
<div class="progress">
  <div style="width: 50%" class="progress-bar progress-bar-gray">Gray</div>
</div>

Stacked Progressbar

40%
20%
10
<div class="progress">
  <div style="width: 40%" class="progress-bar progress-bar-magenta">40%</div>
  <div style="width: 20%" class="progress-bar progress-bar-green">20%</div>
  <div style="width: 10%" class="progress-bar progress-bar-info">10</div>
</div>
<div class="progress">
  <div style="width: 45%" class="progress-bar progress-bar-magenta"></div>
  <div style="width: 10%" class="progress-bar progress-bar-gray"></div>
  <div style="width: 45%" class="progress-bar progress-bar-green"></div>
</div>